<template>
  <div class="notice">
    <h3>
      <el-icon><connection /></el-icon>
      <span>公告栏</span>
    </h3>
    <ul>
      <li>1.Aside两处折叠；</li>
      <li>2.登录是否需要添加角色</li>
      <li>3.vue.config.js文件</li>
      <li>4.自动import</li>
      <li><a href="https://www.baidu.com" target="_blank">百度一下</a></li>
      <li>
        <a
          href="https://v3.cn.vuejs.org/guide/introduction.html"
          target="_blank"
          >Vue3官方教程</a
        >
      </li>
      <li>
        <a
          href="https://element-plus.gitee.io/zh-CN/component/border.html"
          target="_blank"
          >ElementPlus</a
        >
      </li>
    </ul>
  </div>
</template>

<script>
import { Connection } from "@element-plus/icons";
import { axiosInstance as axios } from "../api/axiosInstance";
export default {
  data() {
    return {};
  },
  components: {
    Connection,
  },
  mounted() {
    this.apiTest(); // 测试跨域
    this.getLocalJSON(); // 测试访问本地JSON文件
    this.mockTest(); // 测试mock
    this.mockTest1(); // 测试mock
  },
  methods: {
    apiTest: () => {
      axios
        .get(
          "/api/sugrec?prod=pc_his&from=pc_web&json=1&sid=34446_35105_35457_34584_34505_34606_35329_35319_26350_22157&hisdata=%5B%7B%22time%22%3A1639295201%2C%22kw%22%3A%22vue-admin-element%22%7D%2C%7B%22time%22%3A1639295579%2C%22kw%22%3A%22vue%20%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%22%7D%2C%7B%22time%22%3A1639297864%2C%22kw%22%3A%22vue-cli4%20%E5%AE%89%E8%A3%85axios%22%2C%22fq%22%3A2%7D%5D&_t=1639297864232&req=2&bs=vue-cli4%20%E5%AE%89%E8%A3%85axios&csor=0"
        )
        .then((res) => {
          console.log(res);
        });
    },
    getLocalJSON: () => {
      axios.get("/json/test.json").then((res) => {
        console.log(res);
      });
    },
    mockTest: () => {
      axios.get("/userInfo/get").then(res => {
        console.log(res);
      })
    },
    mockTest1: () => {
      axios({method:'post', url:"http://localhost:8080/login", data:{usrname:"zs",password:"123"}}).then(res => {
        console.log(res);
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.notice {
  height: 300px;
  width: 500px;
  background: floralwhite;
  text-align: center;
  padding: 10px;
  box-shadow: 10px 10px 5px #888888;
  overflow: auto;
  h3 {
    margin: 0;
    span {
      margin-left: 6px;
    }
  }
  ul,
  li {
    text-align: left;
    margin-top: 10px;
  }
  a {
    text-decoration: none;
  }
}
</style>
